<template>
  <div id="Home" :style="{ backgroundImage: `url(${homeBackImg})` }">
    <!-- 站内导航 -->
    <div class="TopNav">
      <!-- 接受子组件传递过来的值，通过函数进行联动 -->
      <TopNav v-on:NavWasHome="NavWasHome" v-bind:midMenuShow=midMenuShow></TopNav>
    </div>
    <!-- 左菜单 -->
    <div class="LeftMenu">
      <LeftMenu v-on:LeftMenusShow="homeLeftMenusShow"></LeftMenu>
    </div>
    <!-- 右菜单 -->
    <div class="RightMenu">
      <RightMenu></RightMenu>
    </div>
    <!-- 中部菜单 -->
    <div class="homeMidMenu" v-show="midMenuShow">
      <MidMenu></MidMenu>
    </div>
    <!-- 搜索 -->
    <div class="search" ref="Search">
      <Search v-on:searchState="searchState"></Search>
    </div>
    <!--模块幻灯片 -->
    <div class="slide" v-show="!searched">
      <el-carousel :interval="4000" type="card" height="350px">
        <el-carousel-item v-for="(item,i) in slideData" :key="i" title="点击前往">
          <router-link :to="item.link" class="slideItem">
            <div>
              <img :src="item.image?item.image:'http://codeworld.fun/res/icons/CodeWorld.ico'" alt="img">
            </div>
            <div style="margin-left: 2%;">
              <h3 style="color: dodgerblue;">{{ item.title }}</h3>
              <p style="color: darkcyan">{{ item.blurb }}</p>
              <p style="color: darkcyan">更新时间：{{ item.time }}</p>
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../components/head/LeftMenu'
import RightMenu from "../components/head/RightMenu";
import TopNav from '../components/head/TopNav'
import MidMenu from "../components/head/MidMenu";
import Search from '../components/body/Search'
import Footer from '../components/foot/Footer'
import '../assets/css/CodeWeb.css';
import '../assets/js/CodeWeb.js';
import CodeWeb from "../assets/js/CodeWeb";
import BrowseRecord from "../apis/BrowseRecord";

export default {
  name: 'Home',
  components: {LeftMenu, RightMenu, TopNav, Search, MidMenu, Footer,},

  data() {
    return {
      homeBackImg: (5 < new Date().getHours() && new Date().getHours() < 18) ? require("../assets/image/galaxy_blue.jpg") : require("../assets/image/creat_redBlue.jpg"),
      searched: "",
      leftMenusShow: true,
      midMenuShow: false,
      slideData: [
        {
          link: "/know?type=编程",
          image: "",
          title: "知识板块",
          blurb: "编程模块：部分建设完成，待更新...",
          time: CodeWeb.getDateToKey(null, null, '/')
        },
        {
          link: "/info?type=热点",
          image: "",
          title: "信息板块",
          blurb: "热点模块：部分建设完成，持续更新中...",
          time: '每天定时跟进'
        },
        /*{link: "/", image: "", title: "创作板块", blurb: "创作板块：建设中......"},*/
        {
          link: "/space/blog",
          image: "",
          title: "星域板块",
          blurb: "博客模块：基本建设完成，持续更新中！",
          time: '每天随时记录'
        },
      ],
    }
  },
  beforeCreate() {
  },
  created() {
    this.browseRecordAdd(window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/#/");
  },
  methods: {
    //todo 点击搜素外面页面 关闭搜素页面
    NavWasHome(e) { //父组件通过函数接受子组件的传值，从而进行联动
      if (e) { //&& this.leftMenusShow === false
        this.midMenuShow = !this.midMenuShow
      }
    },
    homeLeftMenusShow(e) {
      this.leftMenusShow = e;
      if (e === true) {
        this.midMenuShow = false;
      }
    },
    searchState(e) {
      this.searched = e;
      //this.$refs.MidMenu.hidden = e ? true : this.$refs.MidMenu.hidden;
    },
    browseRecordAdd(href) {
      BrowseRecord.add({href: href}).then((res) => {
        if (res.status === 200 && res.finish) {
          //todo ...
        } else {
          console.log(res)
        }
      })
    },
    toModule(link) {
      this.$router.push(link)
    }
  },
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style scoped>
#Home {
  /*background: url("../assets/image/galaxy_blue.jpg");*/
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
}

.LeftMenu {
  z-index: 2;
}

.RightMenu {
  float: right;
}

.TopNav {
}

.homeMidMenu {
  position: absolute;
  width: 100%;
}

.search {
}

.footer {
}

/*模块幻灯片*/
.slide {
  position: absolute;
  width: 60%;
  height: 40%;
  margin-top: 20%;
  margin-left: 20%;
}

el-carousel {
  opacity: 0.9;
}

.slideItem {
  height: 90%;
  font-size: 14px;
  line-height: normal;
  margin: 0;
  display: flex;
}

.slideItem:hover {
  font-size: 15px;

}

.slideItem img {
  width: 200px;
  height: 200px;
  margin-top: 30px;
}

.slideItem img:hover {
  width: 215px;
  height: 215px;
}

.slideItem:nth-child(2n) {
  background-color: aliceblue;
}

.slideItem:nth-child(2n+1) {
  background-color: azure;
}

/*模块幻灯片end*/

/*button[type="button"] {
  background: mediumseagreen;
}

button[type="button"]:hover {
}*/

</style>
